<template>
    <div class="center-info">
        <div class="head">知识收藏</div>
        <div class="card">
            <div class="tab">
                <div class="tab-item" @click="selectTabFun(item, index)" :class="{ 'tab-item-active': tabCurrent == index }" v-for="(item, index) in tabList" :key="index">{{ item.title }}</div>
            </div>
            
            <div class="list">
                <knowItem :showBtn="true" v-for="(item,index) in list" @cancel="calcelFun" :item="item" :key="index"></knowItem>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="total" @current-change="paginationFun">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import knowItem from '../pageComponents/know-item.vue';
import {getMyCollect,getType,addCollect} from "@/api/know";
export default {
    components: {
        knowItem,
    },
    data() {
        return {
            tabList: [],
            tabCurrent: 0,
            params:{
                page:1,
                limit:10,
                type_id:'',
                type:0
            },
            list:[],
            total:0
        };
    },
    mounted() {
        this.getTypeFun()
        this.getListFun()
    },
    methods: {
        calcelFun(item){
            addCollect({id:item.id,type:0,type_id:item.type_id}).then(res=>{
                if(res.code == 200){
                    this.$message.success('操作成功')
                    this.getListFun()
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        selectTabFun(item, index) {
            this.tabCurrent = index;
            this.params.type_id = item.id
            this.getListFun()
        },
        getTypeFun() {
            getType().then(res => {
                if(res.code == 200){
                    let list = res.data || []
                    list.unshift({
                        id:0,title:'全部'
                    })
                    this.tabList = list
                }
            })
        },
        paginationFun(page){
            this.params.page = page
            this.getListFun()
        },
        getListFun(){
            getMyCollect(this.params).then(res => {
                if(res.code == 200){
                    let list = res.data.list || []
                    this.list = list.map(item=>{
                        item['id'] = item.p_id
                        return {...item,...item.info}
                    })
                    this.total = res.data.count || 0
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.center-info {

    .card {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0px 0px 0.15rem 0.0125rem rgba(0, 0, 0, 0.08);

        .tab {
            display: flex;
            width: 100%;
            height: 0.9rem;
            background: #EDF3FF;
            overflow-x: scroll;
            &::-webkit-scrollbar {
                height: 0;
                border-radius: 0.025rem;
                background: rgba(0, 0, 0, 0.1);
            }
            &::-webkit-scrollbar-thumb {
                background: #4f8af8;
            }

            .tab-item {
                position: relative;
                font-size: 0.2rem;
                color: #000;
                padding: 0 0.3rem;
                line-height: 0.9rem;
                cursor: pointer;
                user-select: none;
            }

            .tab-item-active {
                &::after {
                    content: '';
                    display: block;
                    width: 0.4rem;
                    height: 0.025rem;
                    background: #4F8AF8;
                    position: absolute;
                    bottom: 0.1875rem;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: center;
            padding: 0 0.375rem  1rem;
        }

        .list {
            padding: 0.3rem 0.5rem;
            

        }
    }
}
</style>